<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>main</title>
<link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
<script src="/res/third/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
<script src="/res/third/validate/jquery.validate.js" type="text/javascript"></script>
<script src="/res/third/artDialog/artDialog.extends.js" type="text/javascript"></script>
<script>
$(function(){
	//列表树
	$('#tt').treegrid({
	    url:'/channel/v_tree.do',
	    idField:'id',   
	    treeField:'text',
	    onContextMenu: onContextMenu,
	    //animate : true,动画效果  不是很好看
	    columns:[[   
	        {title:'栏目名称',field:'text',width:180},   
	        {field:'code',title:'栏目代码',width:200,align:'left'},   
	    ]],
	    onLoadSuccess : function(row , data){
		    if(data.length == 0){
		    	$("#addButton").css({"display" : ""});
			}
		}
	});
	
})
//右键
 function onContextMenu(e,row){
      e.preventDefault();
      $(this).treegrid('select', row.id);
      $('#mm').menu('show',{
          left: e.pageX,
          top: e.pageY
      });
}
var dialog;
function appendp(){
//新建同级节点
document.formName.reset();
	var node = $('#tt').treegrid('getSelected');
	var hasp = $('#tt').treegrid("getParent",node.id);
	if(hasp==null){//没有父节点
	    	$("#parent_id").val(0);//父节点则为0	
	}else{
	        $("#parent_id").val(hasp.id);
	}
    dia("新增同级");
}
//增子级
function appendc(){
	//新建子级节点
	document.formName.reset();
	var node = $('#tt').treegrid('getSelected');
	$("#parent_id").val(node.id);
	dia("新增子级");
}

function dia(title){//弹窗
   dialog = art.dialog({
        title: title,
        width:500,
        lock:true,
        content: document.getElementById('create')
    });
}
//提交
function sub(){
	$.ajax({
		   type: "POST",
		   dataType:"json",
		   url: "/channel/o_add.do",
		   data:$("form").serialize(),
		   beforeSend:function(){
			   art.dialog.tips("编辑中....");
		   },
		   success: function(data){
			   if(data.success){
// 				   succ_msg(data.msg , function(){location.reload();});
                 location.reload();
			   }else{
				   error_msg(data.msg , function(){location.reload();});
			   }
		   }
	});
}
//编辑
function editcurrent(){
	var node = $('#tt').treegrid('getSelected');
	$("#id").val(node.id);
	$("#channelName").val(node.text);
	$("#code").val(node.code);
	dia("编辑");
}

//删除
function del(){
	var node = $('#tt').treegrid('getSelected');
	artDialog.confirm("子栏目也将一并删除，是否确认删除？" , function(){
		$.ajax({
			   type: "get",
			   dataType:"json",
			   url: "/channel/o_del.do",
			   data:{id:node.id},
			   beforeSend:function(){
		            art.dialog.tips("删除中...");
		        },
			   success: function(data){
				   if(data.success){
					   location.reload();
				   }else{
					   error_msg(data.msg , function(){location.reload()});	
				   }
			   }
		});
	});
}

//新增第一条记录
function addChannel(){
	$("#parent_id").val(0);
	dia("新增根节点");
}
</script>
<style type="text/css">
#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
#rMenu ul li{
	margin: 1px 0;
	padding: 0 5px;
	cursor: pointer;
	list-style: none outside none;
	background-color: #DFDFDF;
}
.form-control{width:200px;}
</style>
</head>
<body>

  <button type="button" class="btn btn-info" id="addButton" onclick="addChannel();" style="display : none;">新增</button>
  <table id="tt" class="table" ></table> 


<!-- 右键 -->
<div id="mm" class="easyui-menu" style="width:120px;">  
    <div onclick="appendp()"  >新建同级</div>
    <div onclick="appendc()"  >新建子级</div>
    <div onclick="editcurrent()"  >编辑</div>
    <div class="menu-sep"></div>  
    <div onclick="del();" >删除</div>  
</div>  
<!-- 新建 -->
<div id="create"  style="display: none;"   >
	<form  class="form-horizontal" name="formName"  role="form"  onsubmit="beforesub();"  >
	<input type="hidden"  name="parentId"  id="parent_id"   />
	<input type="hidden"  name="id"  id="id"   />
	  <div class="form-group">
	    <label for="channelName" >栏目名称</label>
	      <input class="form-control" id="channelName" name="channelName"  required />
	  </div>
	  <div class="form-group">
	    <label for="code" >栏目编码</label>
	      <input  class="form-control" id="code"  name="code" required />
	  </div>
	  <div class="form-group">
	    <div style="text-align: center;" >
	      <button  onclick="sub();"  type="button" class="btn btn-info">提交</button>
	    </div>
	  </div>
	</form>
</div>
</body>
</html>
